<template>
  <el-dialog
    :model-value="visible"
    title="上传书刊文档"
    width="780px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
    class="upload-dialog"
    v-loading="loading"
  >
  <div v-loading="loading" element-loading-text="正在比对中，请等待..." class="text-xl">

  <div class="tips-box">
    <div class="tips-content">
        支持上传 pdf格式的文件，支持比对长文档，预计 3 分钟可分析单文档 100 页。
    </div>
  </div>
    <!-- 上传区：左右两个区域，使用element-plus上传组件 -->
    <div class="upload-area-wrapper" style="display: flex; align-items: flex-start; justify-content: center; margin: 30px 0;">
      <!-- 左侧：文档 -->
      <div style="display: flex; flex-direction: column; align-items: center; flex: 1; margin-right: 24px;">
        <div style="font-weight: bold; font-size: 16px; margin-bottom: 16px;">原稿</div>
        <div class="upload-box" style="width: 100%; display: flex; flex-direction: column; align-items: center;">
          <el-upload 
            v-model="form.file1"
            class="el-upload-dragger"
            drag
            :show-file-list="false"
            :limit="1"
            :on-exceed="handleExceed1"
            :on-change="handleMainFileChange"
            :auto-upload="false"
            :accept="'.pdf,'"
          >
            <el-icon style="font-size: 48px; color: #409eff;">
              <img src="@/assets/images/icon-upload.png" alt="">
            </el-icon>
            <div v-show="!form.file1" class="el-upload__tip" style="margin-top: 8px;color: #999; font-size: 12px;">请将原文稿拖放到此处或点击上传</div>
            <!-- <div v-show="!form.file1" class="el-upload__tip" style="color: #999; font-size: 12px;">支持上传单文档大小 100 MB 以内</div> -->
            <div v-show="!!form.file1" class="el-upload__tip" style="margin-top: 6px;color: #999; font-size: 12px;">&nbsp;    </div>
            <div v-show="!!form.file1" class="el-upload__tip" style="color: #999; font-size: 14px;">{{uploadList.file1}}</div>
          </el-upload>
        </div>
      </div>

      <!-- 右侧：对比文稿 -->
      <div style="display: flex; flex-direction: column; align-items: center; flex: 1; margin-left: 24px;">
        <div style="font-weight: bold; font-size: 16px; margin-bottom: 16px;">对比文稿</div>
        <div class="upload-box" style="width: 100%; display: flex; flex-direction: column; align-items: center;">
          <el-upload
            v-model="form.file2"
            class="el-upload-dragger"
            drag
            :show-file-list="false"
            :limit="1"
            :on-exceed="handleExceed2"
            :on-change="handleCompareFileChange"
            :auto-upload="false" 
            :accept="'.pdf'"
          >
            <el-icon style="font-size: 48px; color: #409eff;">
                <img src="@/assets/images/icon-upload.png" alt="">
            </el-icon>
            <div v-show="!form.file2" class="el-upload__tip" style="margin-top: 8px;color: #999; font-size: 12px;">请将对比文稿拖放到此处或点击上传</div>
            <!-- <div v-show="!form.file2" class="el-upload__tip" style="color: #999; font-size: 12px;">支持上传单文档大小 100 MB 以内</div> -->
            <div v-show="!!form.file2" class="el-upload__tip" style="margin-top: 6px;color: #999; font-size: 12px;">&nbsp;</div>
            <div v-show="!!form.file2" class="el-upload__tip" style="color: #999; font-size: 14px;">{{uploadList.file2}}</div>
          </el-upload>
        </div>
      </div>
    </div>

    <!-- 多选框展示说明 -->
    <el-checkbox-group v-model="checkedTips" class="tips-checkbox-group">
      <el-checkbox
        v-for="(tip, idx) in tips"
        :key="idx"
        :label="tip"
      >
        {{ tip }}
      </el-checkbox>
    </el-checkbox-group>

  <div style="display: flex; justify-content: center; margin-top: 32px; margin-bottom: 32px;">
    <el-button type="primary" :icon="Reading" @click="fileCompare">
      比对
    </el-button>
  </div>

  </div>

  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { Reading, Edit, Plus, Share, Check, Message } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { login, compareFiles } from '@/api/user'
import { useRouter } from 'vue-router'
const router = useRouter()


const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  }
})
const emit = defineEmits(['close'])

const uploadList = ref({
  file1: null,
  file2: null,
})

const form = ref({
  file1: null,
  file2: null,
})

const loading = ref(false)

const handleMainFileChange = (file) => {
  form.value.file1 = file.raw
  uploadList.value.file1 = file.name
  ElMessage.success(`${file.name}上传成功`)
}

const handleCompareFileChange = (file) => {
  console.log(file);
  form.value.file2 = file.raw
  uploadList.value.file2 = file.name
  ElMessage.success(`${file.name}上传成功`)
}

const handleExceed1 = (file, uploadFiles) => {
  form.value.file1 = file[0]
  uploadList.value.file1 = file[0].name
  ElMessage.success(`${file[0].name}上传成功`)
}

const handleExceed2 = (file, uploadFiles) => {
  form.value.file2 = file[0]
  uploadList.value.file2 = file[0].name
  ElMessage.success(`${file[0].name}上传成功`)
}

const fileCompare = async ()=>{
  try {
    loading.value = true  
    let formData = new FormData();
    formData.append('file1', form.value.file1);
    formData.append('file2', form.value.file2);
    let res = await compareFiles(formData)
    if(res.code == 200){
        loading.value = false
        ElMessage.success(`比对成功`)
        handleClose()
        localStorage.setItem('res', JSON.stringify(res.result))
        router.push({ name:'Compare', params:{ res: '1111'} })
    }
  } catch (error) {
    loading.value = false
  }
}


function handleFiles(e) {
  console.log('选中的文件:', e.target.files)
}
function handleClose() {
  emit('close')
}

// 说明项
const tips = [
  '保留标点符号的差异',
  '保留字母大小写的差异',
  '保留内容空格',
    '保留识别反白字',
  // '保留文档目录的差异',
  // '保留章节层级差异',
  // '保留字体样式的差异',
  // '页眉页脚',
]
// 默认全部选中
const checkedTips = ref([...tips])
</script>

<style scoped>
.el-upload-dragger{
    width: 320px;
}
.tips-box{
    width: 100%;
    display: flex;
     justify-content: center;
}
.tips-content{
    text-align: center;
    width: 85%;
    font-size: 12px;
    height: 36px;
    line-height: 36px;
    border-radius: 2px;
    background-color: #1B1E25;
}

.upload-dialog :deep(.el-dialog__body) {
  padding: 32px 40px 24px 40px;
  display: flex;
  flex-direction: column;
}

.drop-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #dcdfe6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s;
  margin-bottom: 24px;
  min-height: 200px;
}

.drop-zone:hover {
  border-color: #409eff;
  background: #f3f9ff;
}

.drop-zone input[type="file"] {
  display: none;
}

.drop-text {
  text-align: center;
}

.drop-text p {
  margin: 12px 0 4px;
  font-size: 16px;
  color: #606266;
}

.drop-text small {
  font-size: 13px;
  color: #909399;
}

.tips-checkbox-group {
  margin-left: 15px;
  margin-top: 24px;
  font-size: 14px;
  color: #606266;
  line-height: 1.8;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
</style>